<template>
  <div class="add-payslid-third">
    <a-row class="content-top">
      <step :current="2" />
    </a-row>
    <div class="content-con">
      <a-row class="mg_b24">
        <a-input-search
          v-model="params.nameOrPhone"
          allow-clear
          placeholder="姓名手机号"
          style="width: 200px;margin-right: 24px"
          @search="onSearch"
        />
        <a-select v-model="params.sendStatus" allow-clear placeholder="发送状态" style="width: 200px" @change="handleChange">
          <a-select-option value="0">未发送</a-select-option>
          <a-select-option value="1">已发送</a-select-option>
        </a-select>
      </a-row>
      <a-row class="sub_tit mg_b12" type="flex" justify="space-between" align="middle">
        <a-col>
          已选择
          <span class="primary">{{ selectedRowKeys.length }}</span>
          位员工（仅发送微信通知：
          <span class="primary">{{ wei }}</span>
          条微信通知)
        </a-col>
      </a-row>

      <a-table
        :row-selection="rowSelection"
        :pagination="pagination"
        :data-source="dataSource"
        :row-key="(i, k) => i.id"
        :scroll="{ y: 300 }"
        @change="changePage"
      >
        <a-table-column title="姓名" data-index="empName" />

        <a-table-column title="手机">
          <template slot-scope="{ phoneStatus }">
            <xq-icon type="icon-wancheng2" v-if="phoneStatus" class="primary_color w32  fs24" />
            <xq-icon type="icon-wancheng2" v-if="!phoneStatus" style="font-size:24px;color:#BFBFBF" />
            <!-- <img v-if="!phoneStatus" src="@/assets/img/payslip/weixuanzhong.png" />
            <img v-if="phoneStatus" src="@/assets/img/payslip/xuanzhong.png" /> -->
          </template>
        </a-table-column>
        <a-table-column title="微信">
          <template slot-scope="{ wechatStatus }">
            <xq-icon type="icon-wancheng2" v-if="wechatStatus" class="primary_color w32  fs24" />
            <xq-icon type="icon-wancheng2" v-if="!wechatStatus" style="font-size:24px;color:#BFBFBF" />
            <!-- <img v-if="!wechatStatus" src="@/assets/img/payslip/weixuanzhong.png" />
            <img v-if="wechatStatus" src="@/assets/img/payslip/weixin.png" /> -->
          </template>
        </a-table-column>
        <a-table-column title="已发送">
          <template slot-scope="{ sendStatus }">
            <xq-icon type="icon-wancheng2" v-if="sendStatus" class="primary_color w32  fs24" />
            <xq-icon type="icon-wancheng2" v-if="!sendStatus" style="font-size:24px;color:#BFBFBF" />
            <!-- <img v-if="!sendStatus" src="@/assets/img/payslip/weixuanzhong.png" />
            <img v-if="sendStatus" src="@/assets/img/payslip/xuanzhong.png" /> -->
          </template>
        </a-table-column>
      </a-table>
      <a-row class="foot">
        <a-button class="mg_r12" @click="doBefor">上一步</a-button>
        <a-button class="mg_r12" :disabled="!selectedRowKeys.length" @click="addStart(1)">发送已选员工</a-button>
        <a-button type="primary" @click="addStart(0)">
          一键发送所有员工
        </a-button>
      </a-row>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "AddPayslidThird",
  components: {
    step: () => import("./step")
  },

  data() {
    return {
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: total => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        personalPeriod: null,
        pageSizeOptions: ["10", "20", "50", "100"]
      },
      selectedRowKeys: [],
      params: {
        nameOrPhone: undefined,
        sendStatus: undefined
      },
      dataSource: [],
      wei: 0
    };
  },
  computed: {
    ...mapState(["hr"]),
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRows;
          this.wei = selectedRows.length;
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.sendStatus === true, // Column configuration not to be checked
            name: record.name
          }
        })
      };
    }
  },

  created() {
    this.getNoSendList();
  },

  methods: {
    // 上一步
    doBefor() {
      const path = "add-payslip-second";
      this.$router.push({
        path,
        query: { ...this.$route.query }
      });
    },
    changePage(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getNoSendList();
    },
    // 获取 未发送列表
    getNoSendList() {
      this.$request({
        url: "/hr/api/v1/salaryBills/listAllRelation",
        params: {
          companyId: this.hr.companyId,
          reloadCount: false,
          tableId: this.$route.query.tableId,
          ...this.params,
          pageNo: this.pagination.current,
          pageSize: this.pagination.pageSize
        }
      }).then(({ data }) => {
        this.dataSource = data.salaryBillListVOList || [];
        this.pagination.total = data.entityCount || 0;
      });
    },
    ...mapMutations({ resetPayslip: "wages/resetPayslip" }),
    // 筛选
    onSearch(e) {
      this.params.nameOrPhone = e;
      this.getNoSendList();
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      const dataSource = [];
      selectedRowKeys.map(key => {
        dataSource.push(this.dataSource[key]);
      });
      this.wei = dataSource.filter(key => key.wechatStatus).length;
    },
    // 状态
    handleChange(e) {
      this.params.sendStatus = e;
      this.getNoSendList();
    },
    // 发送
    addStart(type) {
      if (!type) {
        this.selectedRowKeys = this.dataSource.filter(item => item.sendStatus !== true);
      }
      if (this.selectedRowKeys.length) {
        this.selectedRowKeys.forEach(item => {
          item.sendType = this.$route.query.sendType;
          item.sendStatus = true;
        });
      }
      const postData = {
        autoCheckHours: this.$route.query.autoCheckHours,
        autoCheckUnit: this.$route.query.autoCheckUnit,
        companyId: this.hr.companyId,
        checkCount: 0,
        feedbackCount: 0,
        readCount: 0,
        salaryBillDOList: this.selectedRowKeys,
        sendBy: "",
        sendName: this.$route.query.sendName,
        sendType: this.$route.query.sendType,
        showEmptyValue: this.$route.query.showEmptyValue === "true",
        tableId: this.$route.query.tableId,
        withdrawStatus: 0,
        withdrawnCount: 0,
        month: this.$route.query.month,
        year: this.$route.query.year
      };

      this.$request({
        url: "/hr/api/v1/salaryBillSends",
        method: "POST",
        data: postData
      }).then(({ data, success }) => {
        if (success) {
          this.resetPayslip();
          this.$notification["success"]({ message: "发送成功" });
          this.$router.push({
            path: "add-payslip-forth",
            query: {
              sendCount: data.sendCount,
              tableId: data.tableId,
              sendName: data.sendName,
              year: data.year,
              month: data.month
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.add-payslid-third {
  padding: 24px;
  .content-top {
    margin-top: 24px;
    padding: 40px 162px;
    background: #fafafa;
    border-radius: 4px;
  }
  .content-con {
    margin-top: 24px;
  }
  .foot {
    border-top: 1px solid #ccc;
    padding: 12px 24px;
  }
  .foot {
    height: 64px;
    line-height: 64px;
    text-align: center;
  }
}
</style>
